
Vue.component('blog-post', {
    props: ['post','show'],
    data:function(){
        return {
            componentName:'sdfadsf'
        }
    },
    methods:{
        onclose:function(){
            this.$emit('update:show', false); 
        }
    },
    template: `
      <div v-if="show" class="blog-post">
        <h3 :class="componentName">{{ post.title }}</h3>
        <button @click="onclose">hide</button>
      </div>
    `
  })

  Vue.component('blog-post1', {
    props: ['post'],
    methods:{
        onclick:function(){
            console.log(this.$parent)
            this.$parent.post.content='children in parent'
        }
    },
    template: `
      <div class="blog-post1" @click="onclick">
        <h3>{{ post.title }}</h3>
            <button v-on:click="$emit('enlarge-text')">
                Enlarge text
            </button>
        <div v-html="post.content"></div>
      </div>
    `
  })

new Vue({
    el: '#root',
    methods:{
        onparent:function(){
            console.log(this.$children)
            this.$children[0].$data.componentName='parent in children';
            
        },
        onParentFlag:function(){
            this.textFlag=!this.textFlag;
        }
    },
    data: {
        posts: [{
            title:'titl1',
            content:'<h1>content1</h1>'
        }],
        post:{
            title:'title',
            content:"content"
        },
        postFontSize: 1,
        textFlag:true
    },
    template: `
      <div class="blog">
      <div @click="onparent">textFlag</div>
      <button @click="onParentFlag" >toggle</button>
      <blog-post :show.sync='textFlag' :post="post"></blog-post>
      <div :style="{ fontSize: postFontSize + 'em' }">
          <blog-post1
            v-for="post in posts"
            v-bind:key="post.id"
            v-bind:post="post"
            v-on:enlarge-text="postFontSize += 0.1"
          ></blog-post1>
        </div>
      </div>
    `
})
